<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>首页</h1>

    <div id="btnDiv">
        <button type="button" @click="experiment01">实验一</button>
        <button type="button" @click="experiment02">实验二</button>
        <button type="button" @click="experiment03">实验三</button>
        <button type="button" @click="experiment04">实验四</button>
    </div>

</body>
<script type="text/javascript" src="/demo/script/vue.js"></script>
<script type="text/javascript" src="/demo/script/axios.min.js"></script>
<script type="text/javascript">

    new Vue({
        "el":"#btnDiv",
        "methods":{
            "experiment01":function () {

                // 验证单击响应函数绑定是否成功
                console.log("ok");

                // 发送 Ajax 请求
                axios({
                    "url":"/demo/ajax/experiment01",
                    "method":"post",
                    "params":{
                        "userName":"tom",
                        "password":"123456"
                    }
                }).then(function (response) {

                    // response 对象是一个完整的响应数据的 JSON 对象
                    console.log(response);

                    // response.data 访问响应体数据
                    console.log(response.data);
                }).catch(function (response) {
                    console.log(response);
                });
            },
            "experiment02":function () {

                // 发送 Ajax 请求
                axios({
                    "url":"/demo/ajax/experiment02",
                    "method":"post",

                    // data属性中指定一个 JSON 数据作为请求体
                    "data":{
                        "stuId": 55,
                        "stuName": "tom",
                        "subjectList": [
                            {
                                "subjectName": "java",
                                "subjectScore": 50.55
                            },
                            {
                                "subjectName": "php",
                                "subjectScore": 30.26
                            }
                        ],
                        "teacherMap": {
                            "one": {
                                "teacherName":"tom",
                                "teacherAge":23
                            },
                            "two": {
                                "teacherName":"jerry",
                                "teacherAge":31
                            },
                        },
                        "school": {
                            "schoolId": 23,
                            "schoolName": "atguigu"
                        }
                    }
                }).then(function (response) {
                    console.log(response);
                }).catch(function (error) {
                    console.log(error);
                });

            },
            "experiment03":function () {
                axios({
                    "url":"/demo/ajax/experiment03",
                    "method":"post",
                    "params":{
                        "empId":666,
                        "empName":"tom",
                        "empSalary":777.77
                    }
                }).then(function (response) {
                    console.log(response);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            "experiment04":function () {
                axios({
                    "url":"/demo/ajax/experiment04.atguigu",
                    "method":"post"
                }).then(function (response) {
                    console.log(response);
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    });

</script>
</html>